<template>
  <div class="home">
    <div class="bg-white p-3 mb-2" v-for="(item, i) in adData" :key="i" @click="skip(item.url)">
      <img class="w-100 p-1 mb-2" :src="item.image" style="height:auto"/>
      <span class="pl-1">代号：{{ item.name }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      adData: [],
    };
  },
  created() {
    this.fetchAdData();
  },
  methods: {
    async fetchAdData() {
      const res = await this.$http.get("/ads");
      this.adData = res.data;
    },
    skip(v){
      // console.log(v)
      window.open(`${v}`)
    }
  },
};
</script>

<style lang="scss">
@import "../../assets/scss/_variable.scss";
.pagination-home {
  // 根据模块本身定义的类名来定义
  .swiper-pagination-bullet {
    opacity: 1;
    border-radius: 0.1538rem;
    background: map-get($colors, "white");
    &.swiper-pagination-bullet-active {
      background: map-get($colors, "info");
    }
  }
}
.menu {
  width: 13%;
  height: 3.2308rem;
  background-color: map-get($colors, "light-1");
  border: 1px solid map-get($colors, "grey");
}
</style>
